<template>
  <div class="toolbox-card">
    <div class="toolbox-card__header">工具箱</div>
    <div class="toolbox-card__body">
      <div class="toolbox-list">
        <div class="toolbox-item" @click="onToolbox">
          <span class="toolbox-icon">
            <img src="@/assets/icon/Frame(1).svg" alt="" />
          </span>
          <span class="toolbox-title">叫号</span>
          <span
            class="toolbox-desc"
            v-if="waitingList && waitingList.length > 0"
            >下一位：<span>
              {{ waitingList[0]?.patientName || '暂无患者' }}
            </span>
            <span>
              <img
                src="@/assets/icon/Frame_1.svg"
                alt=""
                style="vertical-align: bottom"
              /> </span
          ></span>
        </div>
        <div class="toolbox-item" @click="onPlusSign">
          <span class="toolbox-icon">
            <img src="@/assets/icon/Frame(2).svg" alt="" />
          </span>
          <span class="toolbox-title">接诊</span>
          <span class="toolbox-desc"
            >临时加号
            <span>
              <img
                src="@/assets/icon/Frame_1.svg"
                alt=""
                style="vertical-align: bottom" /></span
          ></span>
        </div>
        <div class="toolbox-item">
          <span class="toolbox-icon">
            <img src="@/assets/icon/Frame(3).svg" alt="" />
          </span>
          <span class="toolbox-title" @click="toggleConsult">{{
            isPaused ? '暂停接诊' : '继续接诊'
          }}</span>
          <span class="toolbox-desc"
            >{{ isPaused ? '点击暂停接诊' : '继续接收患者' }}
            <span>
              <img
                src="@/assets/icon/Frame_1.svg"
                alt=""
                style="vertical-align: bottom" /></span
          ></span>
        </div>
        <!-- <div class="toolbox-item">
          <span class="toolbox-icon">
            <img src="@/assets/icon/Frame.svg" alt="" />
          </span>
          <span class="toolbox-title">全部收起</span>
          <span class="toolbox-desc"
            >仅显示主屏
            <span>
              <img
                src="@/assets/icon/Frame_1.svg"
                alt=""
                style="vertical-align: bottom" /></span
          ></span>
        </div> -->
      </div>
    </div>
    <BottomDrawer
      :visible="callDialog"
      :title="'挂号'"
      :width="450"
      @close="callDialog = false"
    >
      <CallDialog
        :visitDate="formData.visitDate"
        @refresh="onRefresh"
        :visible="callDialog"
      />
    </BottomDrawer>
    <el-dialog
      v-model="isAdmissionsStop"
      :width="400"
      @close="isAdmissionsStop = false"
    >
      <template #title>
        <span style="display: inline-flex; align-items: center">
          <img src="@/assets/icon/info-circle-filled.svg" alt="" />
          <span style="margin-left: 10px">是否确认暂停接诊？</span>
        </span>
      </template>
      <div style="padding: 0px 30px">
        <div class="">暂停接诊后，将无法挂号！</div>
        <!-- <div style="margin-top: 10px">
          <el-checkbox-group v-model="AdmissionsList" class="checkbox-grid">
            <el-checkbox label="打印病历" value="1" />
            <el-checkbox label="打印检查单" value="2"></el-checkbox>
            <el-checkbox label="完成处方" value="3"></el-checkbox>
          </el-checkbox-group>
        </div> -->
      </div>
      <template #footer>
        <el-button @click="isAdmissionsStop = false">取消</el-button>
        <el-button type="primary" @click="submitStop">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { pauseMedical, resumeMedical } from '@/api/medical';
import {
  getWaitingList,
  getToBeSeenList,
  getSeenList,
  callNext,
  repeatCall,
  postMissed,
  getDoctorList,
  getDoctorMedicalStatus,
} from '@/api/medical';
import dayjs from 'dayjs';
const emits = defineEmits(['onToolboxs', 'onPlusSign']);
const formData = ref<any>({
  visitDate: dayjs(new Date()).format('YYYY-MM-DD'),
});
// 是否处于“暂停接诊”状态：
// false = 正在接诊（按钮显示“暂停接诊”），true = 已暂停（按钮显示“继续接诊”）
const isPaused = ref(false);
const isAdmissionsStop = ref(false);
const toggling = ref(false);
const callDialog = ref(false);
interface Patient {
  patientName?: string;
  queueId?: string;
  // add other properties if needed
}
const waitingList = ref<Patient[]>([]);
const toggleConsult = async () => {
  if (toggling.value) return;
  toggling.value = true;
  try {
    if (!isPaused.value) {
      await resumeMedical();
      isPaused.value = true;
      ElMessage.success('已继续接诊');
    } else {
      // await pauseMedical();
      // isPaused.value = false;
      // ElMessage.success('已暂停接诊');
      isAdmissionsStop.value = true;
    }
  } catch (e) {
    //ElMessage.error('操作失败，请重试');
  } finally {
    toggling.value = false;
  }
};
const onRepeatCall = async () => {
  //console.log('repeat call');
  const data = await repeatCall({ queueId: waitingList?.value[0]?.queueId });
  if (data.code == '200') {
  } else {
    //ElMessage.error(data.msg);
  }
};
const onPlusSign = async () => {
  emits('onPlusSign');
};
const submitStop = async () => {
  await pauseMedical();
  isPaused.value = false;
  isAdmissionsStop.value = false;
  ElMessage.success('已暂停接诊');
};
onMounted(async () => {
  const data = await getWaitingList();
  if (data.code == '200') {
    waitingList.value = data.data;
  } else {
    //ElMessage.error(data.msg);
  }
  const data1 = await getDoctorMedicalStatus();
  if (data1.code == '200') {
    if (data1.data == '0') {
      isPaused.value = true;
    } else {
      isPaused.value = false;
    }
  } else {
    //ElMessage.error(data1.msg);
  }
});
const onRefresh = async () => {
  //console.log('1111111111111');

  const data = await getWaitingList();
  if (data.code == '200') {
    waitingList.value = data.data;
  } else {
    //ElMessage.error(data.msg);
  }
};
const onToolbox = () => {
  // emits('onToolboxs');
  callDialog.value = true;
};
</script>

<style scoped>
.toolbox-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
  min-width: 240px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.toolbox-card__header {
  font-size: 17px;
  font-weight: 600;
  color: #222;
  padding: 16px;
  border-bottom: none;
  background: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.toolbox-card__body {
  padding: 0 0 0 0;
  flex: 1;
}
.toolbox-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 16px;
}
.toolbox-item {
  display: flex;
  align-items: center;
  height: 44px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 16px;
  background: none;
  transition: background 0.2s;
  cursor: pointer;
}
.toolbox-item:last-child {
  border-bottom: none;
}
.toolbox-icon {
  display: inline-block;
  margin-right: 10px;
  text-align: center;
  line-height: 22px;
  font-size: 16px;
  vertical-align: middle;
  position: relative;
}
.toolbox-icon.consult {
  background: #f0f7ff;
}
.toolbox-title {
  flex: 0 0 80px;
  font-weight: 500;
  color: #222;
  font-size: 16px;
}
.toolbox-desc {
  flex: 1;
  text-align: right;
  color: #888;
  font-size: 14px;
  white-space: nowrap;
}
.arrow {
  color: #bbb;
  font-size: 15px;
  margin-left: 2px;
}
</style>
